<!-- pages/components/map/map.vue -->
<template>
	<view class="wrapper">
		<view class="title">地图演示 (广西农职大)</view>
		<view class="box">
			<text style="font-size: 14px;">如果显示空白，请检查：<br>1. manifest.json是否配置了Key？<br>2. H5端请配置Web JS Key。<br>3. App端请配置Android/iOS Key。</text>
		</view>
		<map
			class="my-map"
			:longitude="longitude"
			:latitude="latitude"
			:markers="markers"
		>
		</map>
		
		<button size="mini" @click="backToCenter" style="margin-top: 10px;">回到中心点</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 1. 定义中心点坐标 (广西农业职业技术大学)
const longitude = ref(108.24);
const latitude = ref(22.84);

// 2. 定义标记点
const markers = ref([
	{
		id: 1, // 必须有
		longitude: 108.24,
		latitude: 22.84,
		title: '广西农职大', // 点击后显示
		iconPath: '/static/logo.png', // 用我们的 logo 当图标
		width: 30,
		height: 30
	}
]);

// 3. (可选) 一个小方法，演示数据驱动
const backToCenter = () => {
	longitude.value = 108.24;
	latitude.value = 22.84;
	uni.showToast({ title: '已归位', icon: 'success' });
};
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
}
.box {
	padding: 10px;
	background-color: #f4f4f4;
	border-radius: 5px;
	margin-bottom: 10px;
}
.my-map {
	width: 100%;
	height: 300px;
}
</style>